import { Form, Input, Button, Upload, message } from "antd";
import React, { Component, ReactNode } from "react";
import { Editor } from "react-draft-wysiwyg";
import { convertToRaw, EditorState, ContentState } from "draft-js";
import { EyeTwoTone, EyeInvisibleOutlined } from "@ant-design/icons";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { UploadOutlined } from "@ant-design/icons";
import { instance } from "../../utils/request";
import { url } from "inspector";
import "../../assets/style/common.scss";
interface EditUsersFormProps {
  data: any;
  visible?: boolean;
  close?: () => void;
  closeModal: () => void; // 将closeModal方法作为props传递给子组件
}

class EditUsersForm extends Component<EditUsersFormProps> {
  onFinish = (values: any) => {
    console.log(values);
    let params = {
      username: values.username,
      email: values.email,
      mobile: values.mobile,
      password: values.password,
    };
    instance
      .put(`/users/${this.props.data.id}`, params)
      .then((res) => {
        message.success("修改用户成功!");
        this.props.closeModal();
      })
      .catch((error) => {
        console.log("error=", error);
      });
  };
  fromRef = React.createRef<any>();
  componentDidMount(): void {
    // 重新进行渲染
    // 获取 父级组件传递过来的值
    const { username, mobile, email, password } = this.props.data;

    console.log("编辑传递的值", this.props.data);
    // 填充表单，获取数据
    this.fromRef.current.setFieldsValue({
      username,
      mobile,
      email,
      password,
    });
  }

  onFinishFailed = () => {};
  render() {
    return (
      <div>
        <Form
          ref={this.fromRef}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="用户名称"
            name="username"
            rules={[{ required: true, message: "请输入用户名称" }]}
          >
            <Input disabled />
          </Form.Item>

          <Form.Item
            label="用户密码"
            name="password"
            rules={[{ required: true, message: "请输入用户密码" }]}
          >
            <Input.Password
              iconRender={(visible) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
            />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: "请输入用户邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="手机号"
            name="mobile"
            rules={[
              { required: true, message: "请输入用户号" },
              { pattern: /^[1-9]\d{10}$/, message: "请输入有效的手机号码" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item style={{ float: "right", marginLeft: "10px" }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default EditUsersForm;
